
'use strict';
// 基础配置

var chartOption = {
            "optionDay" : {
                tooltip : {
                    trigger: 'axis',
                    axisPointer :{
                       lineStyle : {
                            width : 0
                        } 
                    },
                    extraCssText : 'border-radius:0;',
                    backgroundColor : 'rgba(34,43,55,.75)',
                    textStyle : {
                        fontFamily: 'Microsoft YaHei',
                        fontSize: '12px'
                    },
                    formatter: function(params){
                        var html = '<div style="line-height:8px;font-family:Microsoft YaHei;padding:10px 5px;margin:-5px;background-color:#222b37;color:#fff;width:200px;height:28px;color:#ccc;font-size:12px;">'+params[0].name+'</div>';
                        for (var i=0;i<=params.length-1;i++){
                            var obj = params[i],
                                value = obj.value,
                                yName = obj.seriesName;
                            if (value == undefined) 
                                value = 0;
                            if ( yName.indexOf('率')>=0) {
                                value = value + '%';
                                chartOption.rate[i] = 1
                            }
                            else if ( yName == '页面cpm' || yName == 'eCPM' || yName == '收入' ) {
                                value = value + '元';
                                chartOption.rate[i] = 2 
                            } else {
                                chartOption.rate[i] = 0
                            }

                            html += '<div style="margin-top:15px;margin-bottom:5px;font-size:12px;font-family:Microsoft YaHei;">';

                            html += '<div style="display: inline-block;margin-right:6px;margin-top:-2px;border-radius:10px;width: 10px;height: 10px;vertical-align: middle;background-color: '+baseData.adTypeAreaMapping[yName]+';"></div>';
                            html += yName+'： '+value + '</div>'
                        }
                        return html
                    }
                },
                legend: {
                    show: false,
                    data:[]
                },
                grid: {
                    left: '50px',
                    right: '50px',
                    bottom: '0',
                    containLabel: true,
                    show: false
                },
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        axisLine : {
                            show: true,
                            lineStyle:{
                                'color': '#c5c5c5',
                                'width': 1
                            }
                        },
                        axisTick:{ // 刻度
                            show : false,
                            margin:0
                        },
                        splitLine : {
                            show : false
                        },
                        data : []
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLine : {
                            show:false,
                            lineStyle:{
                                'color': 'transparent',
                                'width': 0
                            }
                        },
                        axisTick:{ // 刻度
                            show : false
                        },
                        axisLabel :{
                            inside :true,
                            margin :0,
                            formatter : function (value, index) {
                                if ( chartOption.rate[0] == 1 ) {
                                    return value + '%'
                                } else if ( chartOption.rate[0] == 2 ) {
                                    return value + '元'
                                }
                                return value
                            }
                        },
                        splitLine : {
                            lineStyle : {
                                color : '#cdcdcd',
                                type  : 'dashed'
                            }
                        }
                    },
                    {
                        type : 'value',
                        axisLine : { // 刻度线
                            show : false
                        },
                        axisTick:{ // 刻度
                            show : false
                        },
                        axisLabel :{ // y轴标签
                            inside :true,
                            margin :0,
                            formatter : function (value, index) {
                                if ( chartOption.rate[1] == 1 ) {
                                    return value + '%'
                                } else if ( chartOption.rate[1] == 2 ) {
                                    return value + '元'
                                }
                                return value
                            }
                        },
                        splitLine : {  // 横线
                            show : false
                        }
                    }
                ],
                // color : ['#11acf4','#f76627','#ffd400','#83d38c','#628cf5','#fc5886'],
                series : []
            },
            "optionAd" : {
                tooltip : {
                    trigger: 'axis',
                    axisPointer :{
                       lineStyle : {
                            width : 0
                        } 
                    },
                    extraCssText : 'border-radius:0;padding:10px;',
                    backgroundColor : 'rgba(34,43,55,.75)',
                    textStyle : {
                        fontFamily: 'Microsoft YaHei',
                        fontSize: '12px'
                    },
                    formatter: function(params){
                        var adName = chartOption.adlocal;
                        var html = '<div style="line-height:8px;font-family:Microsoft YaHei;padding:10px 5px;margin:-5px;background-color:#222b37;color:#fff;width:200px;height:28px;color:#ccc;font-size:12px;">'+params[0].name+' ' + adName +'</div>';
                        for (var i=0;i<=params.length-1;i++){
                            var obj = params[i],
                                value = obj.value,
                                yName = obj.seriesName;
                            if (value == undefined) 
                                value = 0;
                            if ( adName.indexOf('率')>=0) {
                                value = value + '%';
                                chartOption.rate[2] = 1
                            }
                            else if ( adName == '页面cpm' || adName == 'eCPM' || adName == '收入' ) {
                                value = value + '元';
                                chartOption.rate[2] = 2 
                            }
                            else {
                                chartOption.rate[2] = 0
                            }
                            html += '<div style="margin-top:15px;margin-bottom:5px;font-size:12px;font-family:Microsoft YaHei;">';
                            html += '<div style="display: inline-block;margin-right:6px;margin-top:-2px;border-radius:10px;width: 10px;height: 10px;vertical-align: middle;background-color: '+baseData.cproTypeAreaMapping[yName]['color']+';"></div>';
                            html += yName+'： '+value + '</div>'
                        }
                        return html
                    }
                },
                legend: {
                    show: false,
                    data:[]
                },
                grid: {
                    left: '50px',
                    right: '50px',
                    bottom: '0',
                    containLabel: true,
                    show: false
                },
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        offset:-15,
                        axisLine : {
                            show: true,
                            lineStyle:{
                                'color': '#c5c5c5',
                                'width': 1
                            }
                        },
                        axisTick:{ // 刻度
                            show : false
                        },
                        splitLine : {
                            show : false
                        },
                        data : []
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLine : {
                            show:false
                        },
                        axisTick:{ // 刻度
                            show : false
                        },
                        axisLabel :{
                            show : true,
                            margin :0,
                            inside :true,
                            formatter : function (value, index) {
                                if ( chartOption.rate[2] == 1 ){
                                    return value + '%'
                                } else if ( chartOption.rate[2] == 2 ) {
                                    return value + '元'
                                } else {
                                    return value
                                }
                            }
                        },
                        splitLine : {
                            show : false
                        }
                    }
                ],
                color : ['#33c8c9','#7ecd6f','#bed42e','#ad944f','#fe7d6e'],
                series : []
            },
            "adlocal" :'',
            "rate" : [0,0,0]
        };
var chartOption1 = {
            "optionDay" : {
                tooltip : {
                    trigger: 'axis',
                    axisPointer :{
                       lineStyle : {
                            width : 0
                        } 
                    },
                    extraCssText : 'border-radius:0;',
                    backgroundColor : 'rgba(34,43,55,.75)',
                    textStyle : {
                        fontFamily: 'Microsoft YaHei',
                        fontSize: '12px'
                    },
                    formatter: function(params){
                        var html = '<div style="line-height:8px;font-family:Microsoft YaHei;padding:10px 5px;margin:-5px;background-color:#222b37;color:#fff;width:200px;height:28px;color:#ccc;font-size:12px;">'+params[0].name+'</div>';
                        for (var i=0;i<=params.length-1;i++){
                            var obj = params[i],
                                value = obj.value,
                                yName = obj.seriesName;
                            if (value == undefined) 
                                value = 0;
                            if ( yName.indexOf('率')>=0) {
                                value = value + '%';
                                chartOption.rate[i] = 1
                            }
                            else if ( yName == '页面cpm' || yName == 'eCPM' || yName == '收入' ) {
                                value = value + '元';
                                chartOption.rate[i] = 2 
                            } else {
                                chartOption.rate[i] = 0
                            }

                            html += '<div style="margin-top:15px;margin-bottom:5px;font-size:12px;font-family:Microsoft YaHei;">';

                            html += '<div style="display: inline-block;margin-right:6px;margin-top:-2px;border-radius:10px;width: 10px;height: 10px;vertical-align: middle;background-color: '+baseData.adTypeAreaMapping[yName]+';"></div>';
                            html += yName+'： '+value + '</div>'
                        }
                        return html
                    }
                },
                legend: {
                    show: false,
                    data:[]
                },
                grid: {
                    left: '50px',
                    right: '50px',
                    bottom: '0',
                    containLabel: true,
                    show: false
                },
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        offset:-15,
                        axisLine : {
                            show: true,
                            lineStyle:{
                                'color': '#c5c5c5',
                                'width': 1
                            }
                        },
                        axisTick:{ // 刻度
                            show : false,
                            margin:0
                        },
                        splitLine : {
                            show : false
                        },
                        data : []
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLine : {
                            show:false,
                            lineStyle:{
                                'color': 'transparent',
                                'width': 0
                            }
                        },
                        axisTick:{ // 刻度
                            show : false
                        },
                        axisLabel :{
                            inside :true,
                            margin :0,
                            formatter : function (value, index) {
                                if ( chartOption.rate[0] == 1 ) {
                                    return value + '%'
                                } else if ( chartOption.rate[0] == 2 ) {
                                    return value + '元'
                                }
                                return value
                            }
                        },
                        splitLine : {
                            lineStyle : {
                                color : '#cdcdcd',
                                type  : 'dashed'
                            }
                        }
                    },
                    {
                        type : 'value',
                        axisLine : { // 刻度线
                            show : false
                        },
                        axisTick:{ // 刻度
                            show : false
                        },
                        axisLabel :{ // y轴标签
                            inside :true,
                            margin :0,
                            formatter : function (value, index) {
                                if ( chartOption.rate[1] == 1 ) {
                                    return value + '%'
                                } else if ( chartOption.rate[1] == 2 ) {
                                    return value + '元'
                                }
                                return value
                            }
                        },
                        splitLine : {  // 横线
                            show : false
                        }
                    }
                ],
                // color : ['#11acf4','#f76627','#ffd400','#83d38c','#628cf5','#fc5886'],
                series : []
            },
            "optionAd" : {
                tooltip : {
                    trigger: 'axis',
                    axisPointer :{
                       lineStyle : {
                            width : 0
                        } 
                    },
                    extraCssText : 'border-radius:0;padding:10px;',
                    backgroundColor : 'rgba(34,43,55,.75)',
                    textStyle : {
                        fontFamily: 'Microsoft YaHei',
                        fontSize: '12px'
                    },
                    formatter: function(params){
                        var adName = chartOption.adlocal;
                        var html = '<div style="line-height:8px;font-family:Microsoft YaHei;padding:10px 5px;margin:-5px;background-color:#222b37;color:#fff;width:200px;height:28px;color:#ccc;font-size:12px;">'+params[0].name+' ' + adName +'</div>';
                        for (var i=0;i<=params.length-1;i++){
                            var obj = params[i],
                                value = obj.value,
                                yName = obj.seriesName;
                            if (value == undefined) 
                                value = 0;
                            if ( adName.indexOf('率')>=0) {
                                value = value + '%';
                                chartOption.rate[2] = 1
                            }
                            else if ( adName == '页面cpm' || adName == 'eCPM' || adName == '收入' ) {
                                value = value + '元';
                                chartOption.rate[2] = 2 
                            }
                            else {
                                chartOption.rate[2] = 0
                            }
                            html += '<div style="margin-top:15px;margin-bottom:5px;font-size:12px;font-family:Microsoft YaHei;">';
                            html += '<div style="display: inline-block;margin-right:6px;margin-top:-2px;border-radius:10px;width: 10px;height: 10px;vertical-align: middle;background-color: '+baseData.cproTypeAreaMapping[yName]['color']+';"></div>';
                            html += yName+'： '+value + '</div>'
                        }
                        return html
                    }
                },
                legend: {
                    show: false,
                    data:[]
                },
                grid: {
                    left: '50px',
                    right: '50px',
                    bottom: '0',
                    containLabel: true,
                    show: false
                },
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        offset:-15,
                        axisLine : {
                            show: true,
                            lineStyle:{
                                'color': '#c5c5c5',
                                'width': 1
                            }
                        },
                        axisTick:{ // 刻度
                            show : false
                        },
                        splitLine : {
                            show : false
                        },
                        data : []
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLine : {
                            show:false
                        },
                        axisTick:{ // 刻度
                            show : false
                        },
                        axisLabel :{
                            show : true,
                            margin :0,
                            inside :true,
                            formatter : function (value, index) {
                                if ( chartOption.rate[2] == 1 ){
                                    return value + '%'
                                } else if ( chartOption.rate[2] == 2 ) {
                                    return value + '元'
                                } else {
                                    return value
                                }
                            }
                        },
                        splitLine : {
                            show : false
                        }
                    }
                ],
                color : ['#33c8c9','#7ecd6f','#bed42e','#ad944f','#fe7d6e'],
                series : []
            },
            "adlocal" :'',
            "rate" : [0,0,0]
        };
var baseData = {
            'adTypeMapping' : {
                'impressionBd'   : '广告展现量',
                'impression'     : '广告展现量（众盟）',
                'impressionValid': '有效广告展现量（众盟）',
                'pv'             : '页面展现量（众盟）',
                'pvValid'        : '有效页面展现量（众盟）',
                'request'        : 'JS请求数（众盟）',
                'requestValid'   : '有效JS请求数（众盟）',
                'clickBd'        : '点击量',
                'click'          : '点击量（众盟）',
                'clickValid'     : '有效点击量（众盟）',
                'clickBdRate'    : '点击率',
                'clickRate'      : '点击率（众盟）',
                'clickValidRate' : '有效点击率（众盟）',
                'equipmentValid' : '有效设备数（众盟）',
                'cpm'            : '页面cpm',
                'ecpm'           : 'eCPM',
                'earn'           : '收入'
            },
            'adTypeAreaMapping' : {
                '广告展现量' : '#11acf4',
                '广告展现量（众盟）' : '#7bcff6',
                '有效广告展现量（众盟）': '#9ac8de',
                '页面展现量（众盟）' : '#a99dff',
                '有效页面展现量（众盟）' : '#b4afd5',
                'JS请求数（众盟）' : '#ff99d5',
                '有效JS请求数（众盟）' : '#ff68e1',
                '点击量' : '#f76627',
                '点击量（众盟）' : '#f68e61',
                '有效点击量（众盟）' : '#d5b0a0',
                '点击率' : '#ffd400',
                '点击率（众盟）' : '#d2c47e',
                '有效点击率（众盟）' : '#d3ecb4',
                '有效设备数（众盟）' : '#73cddc',
                '页面cpm' : '#83d38e',
                'eCPM' : '#628cf5',
                '收入' : '#fc5886'
            },
            'adTypeOrder' : [
                '广告展现量',
                '广告展现量（众盟）',
                '有效广告展现量（众盟）',
                '页面展现量（众盟）',
                '有效页面展现量（众盟）',
                'JS请求数（众盟）',
                '有效JS请求数（众盟）',
                '点击量',
                '点击量（众盟）',
                '有效点击量（众盟）',
                '点击率',
                '点击率（众盟）',
                '有效点击率（众盟）',
                '有效设备数（众盟）',
                '页面cpm',
                'eCPM',
                '收入'
            ],
            'cproTypeMapping' : {
                '1' : '移动悬浮',
                '2' : '移动插屏',
                '3' : '移动度宝',
                '4' : '移动智能场景',
                '5' : '移动图加',
                '6' : '移动焦点横幅',
                '7' : '移动焦点嵌入',
                '8' : 'PC悬浮',
                '9' : 'PC图加',
                '10' : 'PC插屏',
                '11' : 'PC标签云'
            },
            'cproTypeTitle':{
                'admin':[
                    '广告展现量',
                    '点击量',
                    '点击率',
                    'ecpm',
                    '收入',
                    '广告展现量（众盟）',
                    '点击量（众盟）',
                    '点击率（众盟）',
                    '有效广告展现量（众盟）',
                    '有效点击量（众盟）',
                    '有效点击率（众盟）',             
                ],
                'channel':[
                    '广告展现量',
                    '点击量',
                    '点击率',
                    'eCPM',
                    '收入'
                ]
            },
            'cproTypeTitleMatch':{
                'admin':[
                    'impressionBd',
                    'clickBd',
                    'clickBdRate',
                    'ecpm',
                    'earn',
                    'impression',
                    'click',
                    'clickRate',
                    'impressionValid',
                    'clickValid',
                    'clickValidRate'           
                ],
                'channel':[
                    'impressionBd',
                    'clickBd',
                    'clickBdRate',
                    'ecpm',
                    'earn'
                ]
            },
            'adByDayTable':{
                'admin':[
                    '广告展现量',
                    '点击量',
                    '点击率',
                    'eCPM',
                    '页面cpm',
                    '收入',
                    'JS请求数（众盟）',
                    '广告展现量（众盟）',
                    '点击量（众盟）',
                    '点击率（众盟）',
                    '页面展现量（众盟）',
                    '有效JS请求数（众盟）' ,
                    '有效广告展现量（众盟）',
                    '有效点击量（众盟）',
                    '有效点击率（众盟）',
                    '有效页面展现量（众盟）',
                    '有效设备数（众盟）'          
                ],
                'channel':[
                    '广告展现量',
                    '点击量',
                    '点击率',
                    'eCPM',
                    '页面cpm',
                    '收入'
                ]
            },
            'typeByDayTable':{
                'admin':[
                    '广告展现量',
                    '点击量',
                    '点击率',
                    'eCPM',
                    '收入',
                    '广告展现量（众盟）',
                    '点击量（众盟）',
                    '点击率（众盟）',
                    '有效广告展现量（众盟）',
                    '有效点击量（众盟）',
                    '有效点击率（众盟）'        
                ],
                'channel':[
                    '广告展现量',
                    '点击量',
                    '点击率',
                    'eCPM',
                    '收入'
                ]
            },
            'cproTypeAreaMapping' : {
                '移动悬浮'    : {'shadow':'rgba(189,210,44,.15)','color':'#bed42e','class':'xuanFu'},
                '移动插屏'    : {'shadow':'rgba(51,200,201,.15)','color':'#33c8c9','class':'chaPing'},
                '移动度宝'    : {'shadow':'rgba(173,147,79,.15)','color':'#ad944f','class':'duBao'},
                '移动智能场景' : {'shadow':'rgba(254,126,113,.15)','color':'#fe7d6e','class':'intelligence'},
                '移动图加'    : {'shadow':'rgba(127,203,111,.15)','color':'#7ecd6f','class':'tuJia'},
                '移动焦点横幅'  : {'shadow':'rgba(164,91,150,.15)','color':'#a45b96','class':'jiaoDian'},
                '移动焦点嵌入'  : {'shadow':'rgba(0,130,204,.15)','color':'#0082cc','class':'qianRu'},
                'PC悬浮'    : {'shadow':'rgba(126,87,198,.15)','color':'#7e57c6','class':'pcxuanFu'},
                'PC图加'    : {'shadow':'rgba(0,150,170,.15)','color':'#0096aa','class':'pctuJia'},
                'PC插屏'    : {'shadow':'rgba(255,170,90,.15)','color':'#ffaa62','class':'pcchaPing'},
                'PC标签云' : {'shadow':'rgba(245,77,128,.15)','color':'#f54d80','class':'pcbiaoQian'}
            },
            'cproTypeOrder' : [
                '移动悬浮',
                '移动插屏',
                '移动度宝',
                '移动智能场景',
                '移动图加',
                '移动焦点横幅',
                '移动焦点嵌入',
                'PC悬浮',
                'PC图加',
                'PC插屏',
                'PC标签云'
            ]
        };


// 城市数组
var echartsOptions = function echartsOptions(el,dataAll,echarts) { // $('.echartWrapper') ==> el
    var that = this;
    that.subDayObj = dataAll;
    that.element = el;
    that.echarts = echarts;
    that.wrapper = that.baseHtml();
    that.element.html(that.wrapper);
    
    that._dataDetails = []; // 按广告位类型的详情页面结构
    that.myChartAd  = that.echarts.init(document.getElementById('chartInsideAd'));
    that.myChartDay = that.echarts.init(document.getElementById('chartInside'));
    that.myChartAd.setOption(chartOption.optionAd);    
    that.myChartDay.setOption(chartOption.optionDay);
    that.init();
    that._normalEvents();
    that._globalEvents();
    that.element.find('.adWrapper').hide();
    window.onresize = that.myChartAd.resize;   
    window.onresize = that.myChartDay.resize;   
};

echartsOptions.prototype = {

    constructor: echartsOptions,

    baseHtml : function(){
        var html     = '';

        html += '<div class="lxEcharts">';
        html += '<div class="adWrapper">';
        html += '    <div id="chartInsideAd" style="width: 100%;height:100%"></div>';
        html += '    <div id="floatLeft">';
        html += '        <div class="mainTitle">';
        html += '            <div class="showTem"></div>';
        html += '            <div class="down"><span class="caret"></span></div>';
        html += '        </div>';
        html += '        <div id="mainConditions" class="mainConditions">';
        html += '        </div>';
        html += '    </div>';
        html += '    <div id="floatRight">';
        html += '        <div class="mainType">广告类型</div>';
        html += '        <div class="mainWrap">';
        html += '            <table class="mainTitle">';
        html += '                <tr>';
        html += '                    <td><div class="down"><span class="caret"></span></div></td>';
        html += '                </tr>';
        html += '            </table>';
        html += '            <div id="mainConditions" class="mainConditions"></div>';
        html += '        </div>';
        html += '    </div>';
        html += '</div>';
        html += '<div class="dayWrapper">';
        html += '    <div id="chartInside" style="width: 100%;height:100%;"></div>';
        html += '    <div id="float">';
        html += '        <table class="mainTitle">';
        html += '            <tr>';
        html += '               <td><div class="down"><span class="caret"></span></div></td>';
        html += '            <tr>';
        html += '        </table>';
        html += '        <div id="mainConditions" class="mainConditions">';
        html += '        </div>';
        html += '    </div>';
        html += '</div></div>';

        return html
    },

    init: function init(dataNew) {
        var that = this;
        if (dataNew) that.subDayObj = dataNew;
        that._clearData();
        // 如果数据为空，将kpi、广告类型等选项隐藏
        if ($.isEmptyObject(that.subDayObj.unified)){
            $('#float').hide();
            $('#floatLeft').hide();
            $('#floatRight').hide()
        } else {
            $('#float').show();
            $('#floatLeft').show();
            $('#floatRight').show();
            that._data   = []; // 按天的echarts的series结构
            that._dataAd = {}; // 按广告类型的series结构
            that._main(); // 创建kpi等浮层，根据传来的数据，将kpi等选项动态加载上，并将数据传入echarts，将echart图标展现出来
            that._attachEvents() // kpi等选项的点击事件
        }
    },
    // 按天的数据转化成echart option.series数据
    _daySeries: function _daySeries(name) {
        var that = this;
        return {
            name : name,
            type : 'line',
            areaStyle : {normal: {
                color : 'transparent'
            }},
            symbol : 'circle',
            symbolSize : 8,
            lineStyle : {
                normal : {
                    width: 3,
                    color: baseData.adTypeAreaMapping[name]
                }
            },
            itemStyle:{
                normal:{
                    color: baseData.adTypeAreaMapping[name]
                }
            },
            yAxisIndex:0,
            data : that.subDayObj.unified[name]['value']
        }
    },
    // 详情页的数据转化成echart option.series数据
    _detailsSeries: function _detailsSeries(name, value) {
        var that = this;
        return {
            name : name,
            type : 'line',
            areaStyle : {normal: {
                color : 'transparent'
            }},
            symbol : 'circle',
            symbolSize : 8,
            lineStyle : {
                normal : {
                    width: 3,
                    color: baseData.adTypeAreaMapping[name]
                }
            },
            itemStyle:{
                normal:{
                    color: baseData.adTypeAreaMapping[name]
                }
            },
            yAxisIndex:0,
            data : value
        }
    },
    // 按广告的数据转化成echart option.series数据
    _adSeries: function _adSeries(kpi,name) {
        var that = this;
        return {
            name : name,
            type :'line',
            areaStyle :  {normal: {
                color :  baseData.cproTypeAreaMapping[name]['shadow']
            }},
            symbol : 'circle',
            symbolSize : 5,
            smooth : true,
            lineStyle : {
                normal : {
                    width: 3
                }
            },
            itemStyle:{
                normal:{
                    color: baseData.cproTypeAreaMapping[name]['color']
                }
            },
            hoverAnimation : false,
            legendHoverLink : true,
            data : that.subDayObj.unified[kpi]['sub'][name]['list']
        }
    },
    // 当传来的数据为空是，将echarts.option.series数据也清空
    _clearData: function _clearData() {
        var that = this;
        // chartOption1是另一个原始的option数据。setOption时，不和过去的数据合并
        that.myChartDay.setOption(chartOption1.optionDay,true);
        that.myChartAd.setOption(chartOption1.optionAd,true) 

    },

    _main: function _main() {
        var that = this;
        that._Float      = that.element.find('#float'), // 计费名
        that._FloatLeft  = that.element.find('#floatLeft'), // 除计费名之外的广告位
        that._FloatRight = that.element.find('#floatRight'); // 广告类型

        var ind = 0;
        chartOption.optionDay.legend.selected = {};
        for( var kpi in that.subDayObj.unified ) {
            // series
            var sub = that._daySeries(kpi);
            chartOption.optionDay.legend.data.push(kpi); // 维度
            that._data.push(sub);

            if ( !that._dataAd.hasOwnProperty(kpi) ){
                 that._dataAd[kpi] = []
            }
            for ( var type in that.subDayObj.unified[kpi]['sub'] ) {
                var subAd = that._adSeries(kpi,type);
                that._dataAd[kpi].push(subAd)
            }
        }
        // 下拉列表上面 默认展现的
        var $main           = that._Float.find('#mainConditions'),
            $floatRightMain = that._FloatRight.find('#mainConditions'),
            $floatLeftMain  = that._FloatLeft.find('#mainConditions'),
            floatMain       = document.createDocumentFragment(),
            floatRightMain  = document.createDocumentFragment(),
            floatLeftMain   = document.createDocumentFragment();
        $main.html('');
        $floatRightMain.html('');
        $floatLeftMain.html('');
        if (that.element.find('.showTem').closest('td').length > 0){
            that.element.find('.showTem').closest('td').remove()
        } 

        // 两个页面广告位下拉选择列表的填充
        var ind = 0;
        for(var i=0;i<=baseData.adTypeOrder.length-1;i++){
            var name = baseData.adTypeOrder[i];
            if (that.subDayObj.unified.hasOwnProperty(name)){
                var kpi     = document.createElement('div'),
                    leftKpi = document.createElement('div'),
                    legendOption = document.createElement('div'),
                    legend  = document.createElement('input'),
                    label   = document.createElement('label');

                kpi.className = 'kpi ' + that.subDayObj.unified[name]['key'];

                legend.setAttribute('name','legend');
                legend.setAttribute('type','checkbox');
                legend.className = 'legend';
                legend.id = that.subDayObj.unified[name]['key'];
                legend.value = name;
                label.setAttribute('for',that.subDayObj.unified[name]['key']);
                label.innerHTML = name;
                legendOption.className = 'legendOption';

                kpi.appendChild(legend);
                kpi.appendChild(legendOption);
                kpi.appendChild(label);
                floatMain.appendChild(kpi);

                if(ind<=1){
                    legend.setAttribute('checked','checked');
                    // echart 接口，lengend true时，显示这条线
                    chartOption.optionDay.legend.selected[baseData.adTypeOrder[i]] = true;
                    var td = $('<td/>');
                    var showTem = $('<div class="showTem"></div>').appendTo(td);
                    showTem.addClass(that.subDayObj.unified[name]['key']).html(name);
                    that._Float.find('.down').parent().before(td)
                } else{
                    // echart 接口，lengend false时，不显示这条线
                    chartOption.optionDay.legend.selected[name] = false
                }


                if (!$.isEmptyObject(that.subDayObj.unified[name]['sub'])) {
                    leftKpi.className = 'kpi ' + that.subDayObj.unified[name]['key'];
                    leftKpi.innerHTML = name;
                    floatLeftMain.appendChild(leftKpi)
                }
                
                if (ind == 0){
                    that._FloatLeft.find('.showTem').html(name);
                    chartOption.adlocal = name
                }
                ind += 1
            }


        }

        $main.append($(floatMain));
        $floatLeftMain.append($(floatLeftMain));

        // 按广告分类， 广告分类下拉选择列表的填充
        var ind = 0;
        for(var i=0;i<=baseData.cproTypeOrder.length-1;i++){
            var name = baseData.cproTypeOrder[i];
            if(that.subDayObj.tableAdTypeByDay.hasOwnProperty(name)){
                var kpi = document.createElement('div'),
                    legend = document.createElement('input'),
                    legendOption = document.createElement('div'),
                    label = document.createElement('label');

                chartOption.optionAd.legend.data.push(name); // 维度

                kpi.className = 'kpi ' + baseData.cproTypeAreaMapping[name]['class'];
                legend.setAttribute('name','legend');
                legend.setAttribute('type','checkbox');
                legend.className = 'legend';
                legend.id = baseData.cproTypeAreaMapping[name]['class'];
                legend.value = name;
                label.setAttribute('for',baseData.cproTypeAreaMapping[name]['class']);
                label.innerHTML = name;
                legendOption.className = 'legendOption';

                kpi.appendChild(legend);
                kpi.appendChild(legendOption);
                kpi.appendChild(label);
                floatRightMain.appendChild(kpi);

                if( ind <= 2 ){
                    var td = $('<td/>');
                    var showTem = $('<div class="showTem"></div>').appendTo(td);
                    showTem.addClass(baseData.cproTypeAreaMapping[name]['class']).html(name);
                    that._FloatRight.find('.down').parent().before(td);
                    legend.setAttribute('checked','checked');
                    that.myChartAd.dispatchAction({ type: 'legendSelect',name: name})
                } else {
                    that.myChartAd.dispatchAction({ type: 'legendUnSelect',name: name})
                }
                ind += 1
            }
        }
        $floatRightMain.append($(floatRightMain));

        chartOption.optionAd.xAxis[0]['data'] = that.subDayObj.dateList;
        chartOption.optionDay.xAxis[0]['data'] = that.subDayObj.dateList;
        
        // 按天图表的绘制
        chartOption.optionDay.series = that._data;
        if ($.isEmptyObject(that._dataAd)){
            chartOption.optionDay.series = [];
            chartOption.optionDay.legend.data = []
        }
        that.myChartDay.setOption(chartOption.optionDay);
        that._check(that._data);
        
        // 按广告类型的图表绘制
        if (that._dataAd.hasOwnProperty('广告展现量'))
            chartOption.optionAd.series =  that._dataAd['广告展现量'];
        // 如果没有数据，则清空lengend和series
        if ($.isEmptyObject(that._dataAd)){
            chartOption.optionAd.series = [];
            chartOption.optionAd.legend.data = []
        }
        that.myChartAd.setOption(chartOption.optionAd)
        // console.log(that._data)
    },
    // 详情页接口，重新读取数据，push到series中
    _detailCharts: function _detailCharts(adType) {
        var that = this;
        that._dataDetails = [];
        for ( var cpro in that.subDayObj.unified ) {
            if(!$.isEmptyObject(that.subDayObj.unified[cpro]['sub'])){
                var sub = that._detailsSeries(cpro, that.subDayObj.unified[cpro]['sub'][adType]['list']);
                chartOption.optionDay.legend.data.push(cpro); // 维度
                that._dataDetails.push(sub)
            } else {
                for( var className in baseData.adTypeMapping) {
                    if ( baseData.adTypeMapping[className] == cpro ) {
                        that._Float.find('.'+className).remove()
                    }
                }
            }
        }
        chartOption.optionDay.xAxis[0]['data'] = that.subDayObj.dateList;
        that.myChartDay.setOption(chartOption.optionDay);
        // 按天图表的绘制
        chartOption.optionDay.series = that._dataDetails;
        // 按天图表，需要标明双坐标，按照点击的顺序，先点击的显示在左坐标，后点击的显示在右坐标，并把数据填充上。
        that._check(that._dataDetails);
        that.element.find('.adWrapper').hide();
        that.element.find('.dayWrapper').show();
        window.onresize = that.myChartDay.resize;  
        // 重新resize图表
        that.myChartDay.resize(); 
    },
    // 按天接口，完全重新加载下页面
    _dayCharts: function _dayCharts(){
        var that = this;
        that.init();
        // for( var kpi in that.subDayObj.unified ) {
        //     var sub = that._daySeries(kpi)
        //     chartOption.optionDay.legend.data.push(kpi) // 维度
        //     that._data.push(sub)
        // }
        // chartOption.optionDay.xAxis[0]['data'] = that.subDayObj.dateList
        // // 按天图表的绘制
        // // chartOption.optionDay.series = that._data
        // that._check(that._data)
        that.myChartDay.resize()
    },
    // 所有按钮的点击事件
    _attachEvents: function _attachEvents() {
        // 按天，kpi的勾选
        var that = this;
        
        that._Float.find('.legend').click(function(){
            var $obj = $(this),
                id   = $obj.attr('id'),
                name = $obj.val();

            var legChecklen = that._Float.find('.legend:checked').length;

            if($obj.is(':checked')){
                chartOption.optionDay.legend.selected[name] = true;
                that.myChartDay.dispatchAction({ type: 'legendSelect', name: name });
                // 如果选中的超过两个条件，要把先选择的删除，并把图表中的折线去掉
                if(legChecklen > 2){
                    // that._Float.find('.showTem')[0]永远是先选择的kpi，that._Float.find('.showTem')[1] 是后选择的kpi
                    var legCheckFirstName = that._Float.find('.showTem')[0].innerHTML;
                        
                    // 根据that._Float.find('.showTem')[0]取出的kpi名，在已勾选的下拉列表中找出，并去掉勾选状态
                    $.each(that._Float.find('.legend:checked'),function(index,value){
                        var thisName = $(this).val();
                        if (thisName == legCheckFirstName) {
                            $(this).prop('checked',false);
                            chartOption.optionDay.legend.selected[thisName] = false;
                            // 这也是去掉折线的一个接口
                            that.myChartDay.dispatchAction({ type: 'legendUnSelect', name: thisName })
                        }

                    });
                    // 将先选择的选项删除
                    that._Float.find('.showTem:eq(0)').parent().remove()
                }
                // 这次新选择的kpi加到float showTem上
                var td = document.createElement('td');
                var showTem = document.createElement('div');
                showTem.className = 'showTem kpi ' + id;
                showTem.innerHTML = name;
                td.appendChild(showTem);

                that._Float.find('.mainTitle .down').parent().before($(td))
                

            } else {
                // 如果是去掉勾选
                // 如果是要取消最后一个勾选，则再次勾选上，页面上，必须留有一个选项
                if (legChecklen <= 0){
                    $obj.prop('checked',true);
                    return
                }
                // 如果不是最后一个，则正常处理，将折线去掉，mainTitle去掉
                chartOption.optionDay.legend.selected[name] = false;
                that.myChartDay.dispatchAction({ type: 'legendUnSelect', name: name });
                that._Float.find('.mainTitle .'+id).parent().remove()
            }

            // 当勾选的选项有两个，则要分配双坐标
            if( legChecklen >=2 ){
                var legCheckSecondName = that._Float.find('.showTem')[1].innerHTML;
                for(var i=0;i<=chartOption.optionDay.series.length-1;i++){
                    var o = chartOption.optionDay.series[i],
                        thisName = o.name;
                    if (thisName == legCheckSecondName){
                        chartOption.optionDay.series[i].yAxisIndex = 1
                    } else {
                        chartOption.optionDay.series[i].yAxisIndex = 0
                    }
                }
            }
            // 如果kpi选项有需要加单位的，则在chartOption中改写状态，option中的formatter会用到。
            $.each(that._Float.find('.showTem'),function(index,value){
                var name = $(this).html();
                if ( index == 0 ){
                    if ( name.indexOf('率') >= 0 ) {
                        chartOption.rate[0] = 1
                    } else if ( name == '收入' || name == '页面cpm' || name == 'eCPM' ) {
                        chartOption.rate[0] = 2
                    } else {
                        chartOption.rate[0] = 0
                    }
                } else {
                    if ( name.indexOf('率') >= 0 ) {
                        chartOption.rate[1] = 1
                    } else if ( name == '收入' || name == '页面cpm' || name == 'eCPM' ) {
                        chartOption.rate[1] = 2
                    } else {
                        chartOption.rate[1] = 0
                    }
                }
            });
            that.myChartDay.setOption(chartOption.optionDay)
        });

        

        // 按广告，广告类型勾选 ok
        that._FloatRight.find('.legend').click(function(){
            var $obj = $(this),
                id   = $obj.attr('id'),
                name = $obj.val(),
                $legCheck = that._FloatRight.find('.legend:checked'),
                legChecklen = $legCheck.length;

            // 广告类型，最少选择一种，最多选择4种
            if (legChecklen<=0){
                $(this).prop('checked',true);
                return
            }

            var className = baseData.cproTypeAreaMapping[name]['class'],
                Tr = that._FloatRight.find('.mainTitle tr');
            if($obj.is(':checked')){

                that.myChartAd.dispatchAction({ type: 'legendSelect', name: name });
                that.myChartAd.dispatchAction({ type: 'legendSelect', name: name });
                var legChecklen = that._FloatRight.find('.legend:checked').length;


                var td = document.createElement('td'),
                    showTem = document.createElement('div');
                showTem.className = 'showTem ' + className;
                showTem.innerHTML = name;
                td.appendChild(showTem);
                that._FloatRight.find('.mainTitle .down').parent().before($(td));
                // 当选项大于4个时，要把最先选择的项删除
                if(legChecklen > 4){
                    var firstObj = that._FloatRight.find('.showTem')[0].innerHTML;
                    var className = baseData.cproTypeAreaMapping[firstObj]['class'];
                    that.myChartAd.dispatchAction({ type: 'legendUnSelect', name: firstObj });
                    that._FloatRight.find('#'+className).prop('checked',false);
                    that._FloatRight.find('.mainTitle td')[0].remove()
                }

            } else {
                that.myChartAd.dispatchAction({ type: 'legendUnSelect', name: name });
                Tr.find('.' + className).closest('td').remove()
            }
        });

        // 按广告类型，kpi的选择，根据所选的kpi重新加载echarts图  ok
        that._FloatLeft.find('.kpi').click(function(){
            var $obj = $(this),
                name = $obj.html();
            
            that._FloatLeft.find('.showTem').html(name);
            that._FloatLeft.find('.down').trigger('click');
            // 切换广告位时，需要加单位的要在echart表中坐标加单位
            chartOption.adlocal = name;
            chartOption.rate[1] = name.indexOf('率') >= 0 ? 1 : 0;
            if ( name.indexOf('率') >= 0 ) {
                chartOption.rate[2] = 1
            } else if ( name == '收入' || name == '页面cpm' || name == 'eCPM' ) {
                chartOption.rate[2] = 2
            } else {
                chartOption.rate[2] = 0
            }
            // chartOption.optionAd.series = that._dataAd[name]
            // 单独更新series
            that.myChartAd.setOption({'series':that._dataAd[name]})
        })
    },
    // 下拉菜单的点击事件，收起和下拉
    _normalEvents: function _normalEvents() {
        var that = this;
        // kpi、广告类型下拉菜单 ok
        that.element.find('.down').click(function(){
            var $main = $(this).closest('.mainTitle').next();
            if($main.is(':hidden')){
                that.element.find('.mainConditions').hide();
                $main.show();
                $(this).addClass('dropup')
            } else {
                $main.hide();
                $(this).removeClass('dropup')
            }
        })
    },
    // 点击空白，将下拉菜单都关掉
    _globalEvents: function _globalEvents() {
        var that = this;
        $(document).bind("click",function(event){  
            var e = event || window.event;   
            var elem = e.srcElement||e.target;   
            while(elem)   
            {   // alert(elem.className);
                if(elem.id == 'float' || elem.id == 'floatLeft' || elem.id == 'floatRight' ) 
                {   
                    return;   
                }   
                elem = elem.parentNode;        
            }      
            that.element.find('.mainConditions').hide();  
        });
    },
    // 双坐标的处理
    _check: function _check(dd) {
        var that = this;
        if (that._Float.find('.legend:checked').length >= 1){
            var $obj = that._Float.find('.showTem:eq(1)'),
                name = $obj.html();

            for(var i=0;i<=dd.length-1;i++){
                var thisName = dd[i].name;
                if (thisName == name){
                    dd[i].yAxisIndex = 1;
                    break
                }
            }
        }
        that.myChartDay.setOption({'series':dd})
        // console.log(that.myChartDay)
    },
    // 返回正在选择的广告位
    _adFunc: function _adFunc() {
        return that._FloatLeft.find('.showTem').html()
    }
};
function adFunc() {

}
